<template>
  <div class="box">
    <div class="content">
      我的
      <div @click="goReg">点击注册</div>
      <div @click="goLogin">去登录</div>
      <hr/>
      <p>count：{{count}}</p>
      <input type="button" value="修改count" @click="mAddCount(5)">
      <p>age{{age}}</p>
      <p>是否成年：{{isAdult}}</p>
      <h5>vuex的模块化</h5>
      <input type="button" value="添加一本书" @click="addBook">
      <p>书籍数量：{{bookCount}}</p>
      <ul>
        <li v-for="item in a.books" :key="item.id">
          <p>书名：{{item.name}}</p>
          <p>作者：{{item.author}}</p>
        </li>
      </ul>      
    </div>
    <FooterBarVue  class="footer"></FooterBarVue>
  </div>
</template>

<script>
  
import FooterBarVue from '@/components/FooterBar.vue';
import {mapState,mapGetters,mapMutations,mapActions} from "vuex";

export default {
  name:"My",
  components:{
    FooterBarVue
  },

  computed:{
    // mapState把仓库中的state映射到当前组件的computed
    ...mapState(["count","age","a"]),
    ...mapGetters(["isAdult"]),
    ...mapGetters({"bookCount":"a/bookCount"})
  },
  methods:{
    ...mapMutations(["mAddCount"]),
    ...mapMutations({"mAddBook":"a/mAddBook"}),
    addBook(){
      this.mAddBook({
        data:{
          id:"01003",
          name:"西游记",
          author:"吴承恩"
        }
      })
    },
    goReg(){
      // this.$router.push("/Reg");
      // this.$router.replace("/Reg");
      this.$router.push("/Reg?username=zsf&userpass=123");

    },
    goLogin(){
      this.$router.push("/Login");
    }
  }
}
</script>

<style scoped>
  .box{
    width: 100%;
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }


  .content{
    flex:1;
    overflow: auto;
  }


</style>